@extends("admin.framework.layouts.main")
@push('styles')
    <style>
        .icon-box{
            width: 110px;
            text-align: center;
            height: 100px;
            /*line-height: 120px;*/
            color: #666;
            font-size: 13px;
            border: 1px solid #DCDFE6;
            border-radius: 2px;
            margin: 2px;
            transition: border-color .15s linear;
            overflow: hidden;
        }
        .icon-box:hover{
            border-color: var(--buttonHoverColors) !important;
        }
        .icon-box:hover i,.icon-box:hover span {
            color: var(--buttonHoverColors) !important;
        }
        .icon-box span {
            line-height: normal;
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
            color: #99a9bf;
            transition: color .15s linear;
        }
        .icon-default{
            display: inline-block !important;
            font-size: 14px !important;
            margin:0;
            color: #99a9bf !important;
        }
        .icon-box i {
            display: block;
            font-size: 35px;
            margin-top: 20px;
            color: #606266;
            transition: color .15s linear;
        }
        .icon-box .icon-name {
            display: inline-block;
            padding: 0 3px;
            height: 1em;
        }
        .icon-del{
            display: block;
            position: absolute;
            top: -18px;
            left: 92px;
        }
        .icon-del i{
            color: #ffffff00;
            font-size: 20px;
        }
        .icon-del:hover{
            border-color: var(--buttonHoverColors) !important;
        }
        .icon-del:hover i,.icon-box:hover span {
            color: var(--buttonHoverColors) !important;
        }
        .icon-list {
            overflow: hidden;
            list-style: none;
            padding: 0 !important;
            border: 1px solid #eaeefb;
            border-radius: 4px;
            font-size: 14px;
            color: #5e6d82;
            line-height: 2em;
        }
        .icon-list li {
            float: left;
            width: 16.66%;
            text-align: center;
            height: 120px;
            line-height: 120px;
            color: #666;
            font-size: 13px;
            border-right: 1px solid #eee;
            border-bottom: 1px solid #eee;
            margin-right: -1px;
            margin-bottom: -1px;
        }
        .icon-list li span {
            line-height: normal;
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
            color: #99a9bf;
            transition: color .15s linear;
        }
        .icon-list li:after, .icon-list li span {
            display: inline-block;
            vertical-align: middle;
        }
        .icon-list li i {
            display: block;
            font-size: 32px;
            margin-bottom: 15px;
            color: #606266;
            transition: color .15s linear;
        }
        .icon-list li .icon-name {
            display: inline-block;
            padding: 0 3px;
            height: 1em;
        }
        .icon-list li:hover{
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .icon-list li:hover i,.icon-list li:hover span {
            color: var(--buttonHoverColors);
        }
    </style>
@endpush
@section("content")
    <div class="form-container">
        <div class="form-container-header">
            <el-row class="options-right">

                <el-button size="small" type="primary" v-if="permissions.insert" @click="tablesRowsInsert">
                    <i :class="permissions.insert.icon"></i> @{{permissions.insert.name}}
                </el-button>
            </el-row>
        </div>
        <div class="form-container-main inline-tables no-pic" v-loading="tables.options.loading">
            <el-table
                    :data="tables.data"
                    border
                    @cell-click="tablesCellMoveEvent"
                    :stripe = "true"
                    tooltip-effect="dark"
                    :expand-row-keys="['1']"
                    ref="formContainerTables"
                    row-key="id"
            >
                <el-table-column prop="name" label="菜单名称" align="left" min-width="160"></el-table-column>
                <el-table-column prop="path" label="菜单地址" align="center" min-width="200"></el-table-column>
                <el-table-column prop="action" label="菜单标识" align="center" ></el-table-column>
                <el-table-column prop="icon" label="图标" align="center" >
                    <template slot-scope="scope"><i :class="scope.row.icon"></i></template>
                </el-table-column>
                <el-table-column prop="facility" label="类型" align="center" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.facility == 1" class="table-span">访问类型</span>
                        <span v-if="scope.row.facility == 2" class="table-span">操作类型</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 2" size="mini" type="danger" effect="plain">禁用</el-tag>
                        <el-tag v-if="scope.row.status == 1" size="mini" type="success" effect="plain">启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" align="center" min-width="120">
                    <template slot-scope="scope" class="col-xs-3">
                        <el-input-number v-model="scope.row.sort" size="mini" @change="tablesRowsSort(scope.row)" class="text-align-center"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="options" label="操作" align="left" width="220" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" :disabled="scope.row.facility == 2" v-if="permissions.insert" @click="tablesRowsAppend(scope.row)">
                            <i :class="permissions.insert.icon"></i> @{{permissions.insert.name}}
                        </el-button>

                        <el-button size="mini" warning type="text" @click="tablesRowsUpdate(scope.row)" v-if="permissions.update">
                            <i :class="permissions.update.icon"></i> @{{permissions.update.name}}
                        </el-button>

                        {{-- 更多操作 --}}
                        <el-dropdown size="small" style="margin-left: 10px">
                            <el-button size="mini" primary type="text"> <i class="fa fa-reorder "></i> 更多操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-if="permissions.insert && permissions.module">
                                    <el-button size="mini" warning type="text" v-if="permissions.insert && permissions.module" @click="tablesRowsCopy(scope.row)">
                                        <i class="el-icon-copy-document"></i> 复制
                                    </el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-if="permissions.module">
                                    <el-button size="mini" type="text" :disabled="!scope.row.module" v-if="permissions.module" @click="menuModule(scope.row)">
                                        <i :class="permissions.module.icon"></i> @{{permissions.module.name}}
                                    </el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-if="permissions.status">
                                    <el-button size="mini" warning type="text" @click="tablesRowsStatus(scope.row,{id:scope.row.id})" v-if="permissions.status" :disabled="scope.row.is_system==1">
                                        <i :class="permissions.status.icon"></i> @{{tables.status.maps[scope.row.status]}}
                                    </el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-if="permissions.remove">
                                    <el-button size="mini" danger type="text" @click="tablesRowsRemove(scope.row)" v-if="permissions.remove">
                                        <i :class="permissions.remove.icon"></i> @{{permissions.remove.name}}
                                    </el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        {{-- 更多操作 End. --}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
@endsection
{{--  扩展页面  --}}
@section("page")

    @include('admin.framework.manage.menus.forms')

@endsection
@push('scripts')
    <script>
        var $App = new Vue({
            el: '#app',
            mixins: [$Config,$Layouts,$Tables,$DrawerForms,$DialogForms],
            data: {
                config:{permissions:true},
                tables:{
                    remove:{url:'framework/manage/menus/remove',msg:'确认删除当前菜单吗？',field:'id'},
                    status:{url:'framework/manage/menus/status',field:'status'},
                    sort:{url:'framework/manage/menus/rank', item:'', field:'id'},
                    url:'framework/manage/menus', search:{}, pagination:{layout:''}
                },
                create:{
                    drawer: false, loading: false, action:'framework/manage/menus/insert',
                    model:{parent_id:[], name:'', path:'',  action:'',icon:'',module:false,
                        module_type:'extend',stated:true,cud:[], sort:'255',facility:'1'},
                    rules: {
                        name: [
                            { required: true, message: '请填写菜单名称', trigger: 'blur'}
                        ],
                        path: [
                            { required: true, message: '请填写菜单地址', trigger: 'blur'}
                        ]
                    }
                },
                move:{
                    drawer: false, loading: false, action:'framework/manage/menus/insert',
                    model:{parent_id:[], name:'', path:'',  action:'',icon:'',module:false,
                        module_type:'extend',stated:true,cud:[], sort:'255',facility:'1'},
                    rules: {
                        name: [
                            { required: true, message: '请填写菜单名称', trigger: 'blur'}
                        ],
                        path: [
                            { required: true, message: '请填写菜单地址', trigger: 'blur'}
                        ]
                    }
                },
                jurisdiction: {dialog: false, loading: false},
                parentsMenuItems:[],
                iconItems:[],
            },
            methods:{
                tablesRowsInsert(){
                    var that = this;
                    that.create.action = 'framework/manage/menus/insert';
                    that.create.model = {
                        parent_id:[], name:'', path:'',  action:'',icon:'',module:false,
                        module_type:'extend',status:true,cud:[], sort:'255',facility:'1'
                    };
                    that.getMenuParentsTree();
                    that.drawerFormsOpens('create');
                },
                tablesRowsCopy(rows) {
                    var that = this;
                    that.create.action = 'framework/manage/menus/insert';
                    that.create.model = {
                        parent_id:rows.parent_id,
                        name:rows.name,
                        path:rows.path,
                        action:rows.action,
                        icon:rows.icon,
                        cud:[],
                        facility:'1',
                        module:false,
                        extend_page:false,
                        module_type:rows.module_type,
                        status:rows.status == '1' ? true : false,
                        sort:rows.sort
                    };
                    that.getMenuParentsTree();
                    that.drawerFormsOpens('create');
                },
                tablesRowsAppend(rows) {
                    var that = this;
                    that.create.action = 'framework/manage/menus/insert';
                    that.create.model = {
                        parent_id:rows.id, name:'', path:'#', action:'', icon:'', module:false, module_type:'extend',
                        extend_page:false, status:true, cud:[], sort:'255', facility:'1'
                    };
                    that.getMenuParentsTree();
                    that.drawerFormsOpens('create');
                },
                tablesRowsUpdate(rows) {
                    var that = this;
                    that.create.action = 'framework/manage/menus/update';
                    that.create.model = {
                        id:rows.id,
                        parent_id:rows.parent_id,
                        name:rows.name,
                        path:rows.path,
                        action:rows.action,
                        icon:rows.icon,
                        cud:[],
                        facility:rows.facility,
                        module:rows.module == '1' ? true : false,
                        module_type:rows.module_type,
                        status:rows.status == '1' ? true : false,
                        sort:rows.sort
                    };
                    that.getMenuParentsTree(true);
                    that.drawerFormsOpens('create');
                },
                openIconJurisdiction() {
                    var that = this;
                    that.dialogFormsOpens('jurisdiction');
                },
                jurisdictionSelected(icon) {
                    var that = this;
                    that.create.model.icon = icon;
                    that.jurisdiction.loading = false;
                    that.jurisdiction.dialog = false;
                },
                getMenuParentsTree(after) {
                    var that = this;
                    $Request.postJson('framework/common/manage/getMenuTrees', {facility:1}, function (res) {
                        that.parentsMenuItems = res.result;
                    });
                    return  true;
                    if(after === true) {
                        $Request.postJson('framework/common/manage/getMenuTrees', {facility:1}, function (res) {
                            that.parentsMenuItems = res.result;
                        });
                        return  true;
                    } else {
                        if(that.parentsMenuItems.length < 1 ) {
                            $Request.postJson('framework/common/manage/getMenuTrees', {facility:1}, function (res) {
                                that.parentsMenuItems = res.result;
                            });
                        }
                        return true;
                    }
                },
                getIcons() {
                    var that = this;
                    $Request.postJson('framework/common/manage/getIcons', {}, function (res) {
                        that.iconItems = res.result;
                    });
                }
            },
            created() {
                var that = this;
                that.getIcons();
            },
            mounted(){

            }
        })
    </script>
@endpush